<!doctype html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定手机号</title>
    <link th:replace="includeJs::includeJs">
    <link th:replace="includeJs::layui_js">

    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="bootstrap/js/bootstrap.js"></script>

    <style>
        .phone-label{
            font-size: 16px;
            color: #555;
        }
        .phone-input{
            margin-top: 5px;
        }
        .form-label{
            font-size: 14px;
            color: #666;
        }
        .nav{
            margin-left: 160px;
        }
        .nav ul.nav_navs{
            margin-left: 232px;
        }
    </style>
</head>
<body>
<link th:replace="includeJs::dingding_header">
<div style="box-shadow: #e8e8e8 0px 3px 3px;">
    <link th:replace="includeJs::dingding_nav">
</div>
<div style="width: 100%; min-height: 550px; padding: 30px 0px">
    <div style="width: 450px; padding: 30px 60px; border-radius: 10px; margin: 0 auto;">
        <span>
            <img src="/img/text-logo.png" width="250" style="margin-left: 40px">
        </span>
        <div style="color: #666" class="mb-4 mt-3">第一次使用QQ登录需绑定手机号</div>
        <div class="form-group">
            <label class="form-label" for="phone">手机号</label>
            <a th:href="@{/register}" style=" color: #2196F3; font-size: 14px; float: right;">没有账号?</a>
            <input id="phone" name="phone" type="text" class="form-control" placeholder="请输入已注册叮叮金融的手机号">
        </div>
        <div class="form-group">
            <label class="form-label" for="ver">验证码</label>
            <div>
                <input id="ver" name="ver" type="text" class="form-control col-7" placeholder="请输入短信验证码" style="float: left">
                <button class="btn-ver btn btn-outline-primary col-4 ml-4">发送验证码</button>
            </div>
        </div>
        <div class="form-group mt-4">
            <button class="btn-binding btn btn-primary btn-block">绑定</button>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer_m">
        <div class="footer_l">使用条款 | 隐私保护</div>
        <div class="footer_r">© 2020 （赣州）叮叮金融信息服务有限公司    备案号 赣ICP备12025643号-1</div>
    </div>
</div>
</body>
<script>
    $(".btn-ver").click(function () {
        var btn = this;
        btn.disabled = true;
        var loading = layer.load(2);

        var phone = $("input[name='phone']").val();

        if(!(/^1[3-9]\d{9}$/.test(phone)) && phone.length != 0) {
            layer.msg("手机号格式错误");
            btn.disabled = false;
        }
        $.ajax({
            url: "/sendBindingCode",
            type: "post",
            data: {
                'phone': phone
            },
            dataType: "text",
            success: function (data) {
                layer.close(loading)
                if (data == "success") {
                    layer.msg("发送成功",{icon:1});
                    setTimeout(function () {
                        btn.disabled = false;
                    },60000)
                } else {
                    layer.msg(data);
                    btn.disabled = false;
                }
            },
            error: function () {
                layer.close(loading)
                layer.msg("服务器错误",{icon: 2})
                btn.disabled = false;
            }
        })
    })
    $(".btn-binding").click(function () {
        var btn = this;
        btn.disabled = true;
        var loading = layer.load(2);

        var phone = $("input[name='phone']").val();
        if(!(/^1[3-9]\d{9}$/.test(phone)) && phone.length != 0) {
            layer.msg("手机号格式错误");
            btn.disabled = false;
        }

        var ver = $("input[name='ver']").val();
        if(!(/^[0-9]{6}$/.test(ver)) && ver.length != 0) {
            layer.msg("短信验证码格式错误");
            btn.disabled = false;
        }
        $.ajax({
            url: "/bindingUser",
            type: "post",
            data: {
                'phone': phone,
                'ver': ver
            },
            dataType: "text",
            success: function (data) {
                layer.close(loading)
                if(data == "success") {
                    window.location.href = "/index"
                } else {
                    layer.msg(data);
                }
                btn.disabled = false;
            },
            error: function () {
                layer.close(loading)
                layer.msg("服务器错误",{icon: 2})
                btn.disabled = false;
            }
        })
    })
</script>
</html>